import React, { Component } from 'react'
import './css/index.css'
import Header from './components/Header'
import Main from './components/Main'
import Footer from './components/Footer'

class App extends Component {
  state = {
    list: [
      { id: 100, name: '吃饭', isDone: true },
      { id: 201, name: '睡觉', isDone: false },
      { id: 103, name: '打豆豆', isDone: true },
    ],
    Array: [
      { id: 100, name: '吃饭', isDone: true },
      { id: 201, name: '睡觉', isDone: false },
      { id: 103, name: '打豆豆', isDone: true },
    ],
  }
  // 新增数组
  addList = (value) => {
    this.setState({
      Array: [
        {
          id: Math.random(),
          name: value,
          isDone: false,
        },
        ...this.state.list,
      ],
    })
  }
  // 单个删除
  deleteBtn = (id) => {
    const newArr = this.state.Array.filter((item) => item.id !== id)
    this.setState({
      Array: newArr,
    })
  }
  // 改变状态
  changeStatus = (id) => {
    const newArr = this.state.Array.map((item) => {
      if (item.id === id) {
        return {
          ...item,
          isDone: !item.isDone,
        }
      } else {
        return { ...item }
      }
    })
    this.setState({
      Array: newArr,
      list: newArr,
    })
  }
  // 全部按钮
  clickAll = () => {
    this.setState({
      Array: this.state.list,
    })
  }
  // Active按钮
  clickActive = () => {
    const newArr = this.state.list.filter((item) => item.isDone === false)
    this.setState({
      Array: newArr,
    })
  }
  // Completed按钮
  clickCompleted = () => {
    const newArr = this.state.list.filter((item) => item.isDone === true)
    this.setState({
      Array: newArr,
    })
  }
  // 删除已完成
  deleteCompleted = () => {
    const newArr = this.state.Array.filter((item) => item.isDone !== true)
    this.setState({
      Array: newArr,
    })
  }
  // 全选
  selectAll = (e) => {
    const newArr = this.state.Array.map((item) => {
      if (e.target.checked) {
        return {
          ...item,
          isDone: true,
        }
      } else {
        return {
          ...item,
          isDone: false,
        }
      }
    })
    this.setState({
      Array: newArr,
      list: newArr,
    })
  }
  render() {
    const { Array } = this.state
    return (
      <section className="todoapp">
        <Header addList={this.addList} />
        <Main
          selectAll={this.selectAll}
          changeStatus={this.changeStatus}
          deleteBtn={this.deleteBtn}
          Array={Array}
        />
        <Footer
          deleteCompleted={this.deleteCompleted}
          clickActive={this.clickActive}
          clickAll={this.clickAll}
          clickCompleted={this.clickCompleted}
          Array={Array}
        />
      </section>
    )
  }
}

export default App
